<template>
  <div>
    <order-step v-if="order && order.state" :orderState="order.state" />

    <order-control v-if="order && order.state" :orderId="order.id" @onSuccess="getOrderDetail();getOrderLogs()" :orderState="order.state" />

    <el-tabs>
      <el-tab-pane label="订单基本信息">
        <table class="striped-border-table">
          <tr>
            <th>订单编号</th>
            <td>{{ order.serialNumber }}</td>
          </tr>
          <tr>
            <th>商品</th>
            <td>{{ order.orderGoods && order.orderGoods.name }}</td>
          </tr>
          <tr>
            <th>商品类型</th>
            <td>
              {{
                order.orderGoods &&
                order.orderGoods.goodsType &&
                order.orderGoods.goodsType.desc
              }}
            </td>
          </tr>
          <tr>
            <th>数量</th>
            <td>{{ order.count }}</td>
          </tr>
          <tr>
            <th>支付方式</th>
            <td>
              {{ (order.payType && order.payType.desc) || "待支付" }}
            </td>
          </tr>
          <tr>
            <th>支付金额(元)</th>
            <td>{{ order.amount || "待支付" }}</td>
          </tr>
          <tr>
            <th>订单状态</th>
            <td>
              {{ order.state && order.state.desc }}
            </td>
          </tr>
          <tr>
            <th>下单时间</th>
            <td>
              {{ order.createTime }}
            </td>
          </tr>
          <tr v-if=" order.payDetail">
            <th>支付时间</th>
            <td>{{ order.payDetail.payTime }}</td>
          </tr>
          <tr v-if="order.photoZip">
            <th>图片下载</th>
            <td>
              <!-- <el-image
                style="width: 100px; height: 100px"
                :src="`${order.photoZip}?qrcode`"
                fit="contain"
              ></el-image> -->
              <!-- <vue-qr  :text="order.photoZip"   :size="150"></vue-qr> -->
              <div>
                <el-link :href="order.photoZip" target="_blank"
                  >点击下载</el-link
                >
              </div>
            </td>
          </tr>
        </table>
      </el-tab-pane>
      <el-tab-pane :label="photoText" lazy :disabled="!photoShow">
        <div v-if="order.orderGoods">
          <div :key="item.id" v-for="item in order.orderGoods.photoSpecs">
            <el-divider content-position="left">
              <el-tag v-if="item.name" type="success">{{ item.name }}</el-tag>
              <el-tag style="margin-left: 10px">{{
                `宽: ${item.width} mm  高: ${item.height} mm DPI: ${item.dpi}`
              }}</el-tag>
            </el-divider>
            <div>{{ item.memo }}</div>
            <div>
              <el-image
                :key="i.id"
                v-for="i in item.photos"
                class="photo"
                fit="cover"
                :preview-src-list="item.photos.map((i) => i.photo)"
                :src="i.photo"
              />
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane
        :label="
          '物流信息' +
          '[' +
          ((order.deliverInfos && order.deliverInfos.length) || 0) +
          ']'
        "
      >
        <el-form>
          <div
            :key="index"
            class="inline-group"
            v-for="(item, index) in order.deliverInfos"
          >
            <el-form-item
              :rules="{
                required: true,
                message: '请选择类型',
                trigger: 'change',
              }"
            >
              <el-select
                v-model="item.deliverCode"
                style="width: 150px"
                placeholder="类型"
              >
                <el-option
                  v-for="t in $CONST.DELIVERY_COMPANY"
                  :key="t.code"
                  :label="t.title"
                  :value="t.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input
                placeholder="物流单号"
                v-model="item.deliverNumber"
              >
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-input
                style="width: 100px"
                placeholder="联系人"
                v-model="item.deliverContact"
              >
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-input
                placeholder="联系电话"
                v-model="item.deliverContactMobile"
              >
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-input
                placeholder="收货地址"
                v-model="item.deliverAddress"
              >
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="danger" @click="onRemoveDelivery(index)"
                >删除</el-button
              ></el-form-item
            >

            <el-form-item>
              <el-button type="primary" @click="queryExpress(item)"
                >物流查询</el-button
              >
            </el-form-item>
          </div>
          <el-form-item>
            <el-button @click="addDelivery">新增物流</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveDelivery">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="订单状态日志">
        <el-timeline style="margin-top: 20px">
          <el-timeline-item
            v-for="(item, index) in logs"
            :key="index"
            :type="index === 0 ? 'success' : 'info'"
            :timestamp="item.createTime"
          >
            <el-card>
              <h4>{{ item.state.desc }}</h4>
              <p>{{ item.remark }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
      <el-tab-pane label="分配的订单任务">
         <el-table
          ref="taskTable"
          :data="tasks"
          style="width: 100%"
        >
          <el-table-column
            label="任务"
            min-width="160"
            align="center"
            property="name"
            fixed
          ></el-table-column>

          <el-table-column
            label="所属订单"
            min-width="100"
            align="center"
            property="order.serialNumber"
          ></el-table-column>
          <el-table-column
            label="执行厂家"
            min-width="100"
            align="center"
            property="execFactory.name"
          ></el-table-column>
          <el-table-column
            label="状态"
            sortable="custom"
            min-width="150"
            align="center"
            property="status.desc"
          ></el-table-column>
          <el-table-column
            label="备注"
            min-width="150"
            align="center"
            property="memo"
          ></el-table-column>
          <el-table-column
            label="创建日期"
            sortable="custom"
            min-width="150"
            align="center"
            property="createTime"
          ></el-table-column>
          <el-table-column
            label="修改日期"
            sortable="custom"
            min-width="150"
            align="center"
            property="updateTime"
          ></el-table-column>
          <el-table-column
            align="center"
            label="详情"
            class-name="fixed-width"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="showDetail(scope.row)"
                v-waves
              >查看</el-button>
              <task-control
                style="margin-left:10px;"
                :execFactoryId="scope.row.execFactoryId"
                v-if="scope.row.status"
                :taskStatus="scope.row.status"
                :taskId="scope.row.id"
                @onSuccess="getOrderDetail"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <el-dialog title="收货地址" :visible.sync="expressDialogVisible">
      <div v-loading="expressLoading">
        <el-timeline v-if="express">
          <el-timeline-item
            :type="index == 0 ? 'success' : 'info'"
            v-for="(e, index) in express"
            :key="index"
            :timestamp="e.time"
          >
            {{ e.desc }}
          </el-timeline-item>
        </el-timeline>
        <div v-else>未查到物流信息，请稍后重试或检查快递单号、公司相关信息</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import taskControl from '@/components/order/TaskControl'
import taskApi from '@/api/task'
import expressApi from '@/api/express'
import orderApi from '@/api/order'
import orderStateLogApi from '@/api/orderStateLog'
import orderStep from '@/components/order/OrderStep'
import orderControl from '@/components/order/OrderControl'
import deliverInfoApi from '@/api/deliverInfo'
export default {
  props: ['id'],
  name: 'info',
  components: {
    orderStep,
    orderControl,
    taskControl
  },
  data () {
    return {
      order: {},
      qiniuConfig: {},
      logs: [],
      tasks: [],
      expressLoading: false,
      express: null,
      expressDialogVisible: false
    }
  },
  computed: {
    orderPercentage () {
      return 0
    },
    photoValid () {
      return (
        this.order.state.name === this.$CONST.ORDER_STATUS.PAID.name &&
        this.order.orderGoods &&
        this.order.orderGoods.photoSpecs.every((item) => {
          return (
            item.photos &&
            item.photos.length > 0 &&
            item.photos.every((p) => p.photo && p.photo.startsWith('http'))
          )
        })
      )
    },
    photoText () {
      if (
        this.order.state &&
        this.order.state.name === this.$CONST.ORDER_STATUS.PAID.name
      ) {
        return '待用户上传'
      } else {
        return '图片信息'
      }
    },
    photoShow () {
      if (
        this.order.state &&
        this.order.state.name !== this.$CONST.ORDER_STATUS.CREATE.name &&
        this.order.state.name !== this.$CONST.ORDER_STATUS.READY_PAY.name
      ) {
        return true
      } else {
        return false
      }
    }
  },
  created () {
    this.getOrderDetail()
    taskApi.getTaskByOrder(this.id).then(res => {
      this.tasks = res.data
    })
    this.getOrderLogs()
  },
  methods: {
    getOrderLogs () {
      orderStateLogApi.getAllByOrderId(this.id).then((res) => {
        this.logs = res.data
      })
    },
    queryExpress (item) {
      this.express = null
      this.expressLoading = true
      this.expressDialogVisible = true
      expressApi
        .query(item.deliverCode, item.deliverNumber)
        .then((res) => {
          this.express = res.data
        })
        .finally(() => {
          this.expressLoading = false
        })
    },
    saveDelivery () {
      deliverInfoApi
        .saveAll(this.order.deliverInfos, this.order.id)
        .then((res) => {
          this.$message.success('物流保存成功')
          this.order.deliverInfos = res.data
        })
    },
    onRemoveDelivery (index) {
      this.order.deliverInfos = this.order.deliverInfos.filter(
        (item, idx) => idx !== index
      )
    },
    addDelivery () {
      this.order.deliverInfos.push({})
    },
    confirmPhoto () {
      this.$confirm('确定提交图片吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        orderApi
          .confirmPhoto(this.order.id, this.order.orderGoods.photoSpecs)
          .then((res) => {
            this.$message.success('提交成功')
            this.getOrderDetail()
          })
      })
    },
    /**
     * 查询订单详情
     */
    getOrderDetail () {
      orderApi.getById(this.id).then((res) => {
        if (res.data) {
          this.order = Object.assign({}, res.data)

          if (this.order.state.name === this.$CONST.ORDER_STATUS.PAID.name) {
            this.order.orderGoods.photoSpecs.forEach((specs) => {
              specs.photos = Array(specs.number)
                .fill()
                .map((item) => {
                  return {
                    width: specs.width,
                    height: specs.height,
                    dpi: specs.dpi,
                    photo: null
                  }
                })
            })
          }
        }
      })
    }
    /**
     * 查询订单相关流水信息
     */
  }
}
</script>

<style lang="scss">
.striped-border-table {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  width: 100%;
  margin: 10px 0;
  font-size: 13px;
  border-collapse: collapse;
  th,
  td {
    border: 1px solid #d3dce6;
    line-height: 20px;
    padding: 5px;
    text-align: center;
  }
  th {
    width: 40%;
  }
  tr:hover {
    background-color: #f5f5f5;
  }
}

.image-uploader {
  margin: 5px 10px;
}

.photo {
  width: 180px;
  height: 180px;
}

.inline-group {
  .el-form-item {
    margin-right: 10px !important;
    display: inline-block;
    .el-form-item__label {
      width: auto !important;
    }

    .el-form-item__content {
      margin-left: 0 !important;
      display: inline-block;
    }
  }
}
</style>
